<template>
    <div class='loading'>
        <div class='ord-loading' v-show="!mask && !progress">
            <img :src="loading" class="color-filter loading-op7" alt="">
            <p class='ord-loading-p'>{{label}}</p>
        </div>

        <div class="progress-wrap" v-show="progress">
          <div class="progress"
            :style="{width:progressNum+'%'}">
          </div>
          <!--<div class="label" :style="{left: 'calc('+progressNum+'% - 20px)'}">
            <span></span>
            <div class="perc">{{progressNum}}%</div>
          </div>-->
          <div class="perc">{{progressNum}}%</div>
        </div>

        <div class='mask-loading' v-show="mask">
            <div class='mask-loading-bg'></div>
            <div class='mask-loading-status color-filter'>
                <img :src="loading">
                <p class='mask-loading-p'>{{label}}</p>
            </div>
        </div>
    </div>
</template>

<script>
import activeShowMinxin from "../../mixin/activeShow.mixin";
import bus from '../../libs/event-bus'
export default {
    props: {
        label: {
            type: String,
            default: "正在识别中"
        },
        type: {
            type: Number,
            default: 0
        },
        mask: { //是否显示全局遮罩层
            type: Boolean,
            default: false,
        },
        progress:{ //是否使用进度条
          type: Boolean,
          default: false,
        }
    },
    mixins: [activeShowMinxin],
    data() {
        return {
            statusMap: new Map([
                [0, require(`@/assets/image/loading.gif`)], //loading
                [1, require(`@/assets/image/warn.png`)], //提示
                [2, require(`@/assets/image/loading_bule.gif`)], //遮罩层loading loading_mask.gif
            ]),
            progressNum: 0,
            timer: null
        }
    },
    computed: {
        loading() {
            return this.statusMap.get(this.type);
        },
    },
    methods:{

    },
    mounted() {
      bus.$on('getProgress', fileId=>{
        if(!this.progress||!fileId)return;
        this.progressNum = 0
        clearInterval(this.timer)
        this.timer = setInterval(async () => {
          const  { body, state }  = await this.$http({url:`${this.$url.getProgress.url}/${fileId}`})
          if (state.ok !== 1) {
            this.$message.warning(`进度获取失败！`);
            return
          }
          this.progressNum = Math.floor(body)
          if (this.progressNum >= 100) {
            clearInterval(this.timer)
            this.progressNum = 100
            this.setStatus(null);
            let opt = _.cloneDeep(this.$url.fileAccess);
            opt.url = `${this.$url.fileAccess.url}/${fileId}`;
            this.$http( opt, { fileId: fileId } ).then(() => {
              // console.log(res);
            })
            bus.$emit('setTreeStatus', fileId)
          }
        }, 200)
      })
    },
    beforeDestroy() {
      bus.$off('getProgress')
      clearInterval(this.timer)
    }
}
</script>

<style lang="less" scoped>
.loading, .ord-loading, .progress-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ord-loading-p {
    color: @primary;
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.mask-loading{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  overflow: hidden;
}

.mask-loading-bg{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    // background-color: #999;
    // opacity: 0.4;
    // position: absolute;
    // top: 0;
    // left: 0;
}

.mask-loading-p {
    color: @primaryLoad; // #fff
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.mask-loading-status{
    width: 200px;
    height: 150px;
    position: absolute;
    top: calc( 50% - 75px );
    left: calc( 50% - 100px );
    text-align: center;
}
.progress-wrap{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #E6E6E6;
  .progress {
    position: absolute;
    display: block;
    width: 0;
    height: 2px;
    top: 0;
    left: 0;
    background: rgba(@primary, 0.6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7eea19', endColorstr='#53ad00', GradientType=0);
    border-radius: 2px;
    overflow: hidden;
  }

  .perc{
    font-family: aldrich, sans-serif;
    position: absolute;
    top: -38px;
    right: 8px;
    line-height: 40px;
    color: white;
    font-size: 12px;
  }
}
</style>
